<template>
  <div class="left-container">
    <h2 ref="h2">Left</h2>
    <p ref="p">{{ age }}</p>
    <button @click="age++">+1</button>
    <art-list ref="artlistRef"></art-list>
  </div>
</template>

<script>
import ArtList from "@/components/ArtList.vue";
export default {
  components: {
    ArtList,
  },
  data() {
    return {
      age: 20,
    };
  },
  //第一个钩子函数
  beforeCreate() {
    console.log("beforeCreate", this.age);
  },
  //第二个钩子函数
  created() {
    console.log("created", this.age);
  },
  //第三个钩子函数
  beforeMount() {
    console.log("beforeMount", this.$refs.h2);
  },
  //第四个钩子函数
  mounted() {
    console.log("mounted", this.$refs.h2);
  },
  //第五个钩子函数
  beforeUpdate() {
    console.log("beforeUpdate", this.age, this.$refs.p.innerHTML);
  },
  //第六个钩子函数
  updated() {
    console.log("updated", this.age, this.$refs.p.innerHTML);
  },
  // 7. beforeDestroy
  beforeDestroy() {
    console.log("父-beforeDestroy");
    // console.log(this.$refs.artlistRef); // 这里的artlistRef 是 子组件的ref
  },
  // 8. destroyed
  destroyed() {
    console.log("父-destroyed");
    // console.log(this.$refs.artlistRef); // 这里的artlistRef 是 子组件的ref
  },
  errorCaptured(err, vm, info) {
    console.log(err.message); //输出错误描述信息
    console.log(vm); //发生错误组件的实例对象
    console.log(info); //也是一个描述信息
    return false; //阻止错误继续传播
  },
};
</script>

<style lang="less" scoped>
.left-container {
  background-color: cadetblue;
}
</style>
